<template lang="html">
  <div class="backBox">
    <el-row style="background:#fff; padding-top:15px;">
      <el-col :span="2" class="text-right">
        <span>产品类型：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-select v-model="typeName" clearable size="small" placeholder="请选择" >
          <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>退款时间：</span>
      </el-col>
      <el-col :span="8" class="text-left">
          <el-date-picker
            size="small"
            v-model="startDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
          <span>至</span>
          <el-date-picker
            size="small"
            v-model="endDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>售卖渠道：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-select v-model="shopId" clearable size="small" placeholder="请选择" >
          <el-option v-for="item in $store.state.shops" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row style="padding:10px 0; background:#fff;">
      <el-col :span="2" class="text-right">
        <span>产品名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="productName" size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>商家名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="businessmenName" size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" :offset="4" class="text-right">
        <span>OTA平台：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-select v-model="otaId" clearable size="small" placeholder="请选择" >
          <el-option
            v-for="item in $store.state.OTAstation"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row style="background:#fff; padding-bottom:10px;">
       <el-col :span="2" :offset="2" class="text-left">
         <el-button type="success" size="small" @click="find">筛选</el-button>
       </el-col>
    </el-row>

    <el-row class="dataBox" v-loading.body="dataLoading">
      <el-col :span="6">
        <p class="score green">{{backData.productCount?backData.productCount:'0'}}</p>
        <p>商品数</p>
      </el-col>
      <el-col :span="6">
        <p class="score green">{{backData.orderCount?backData.orderCount:'0'}}</p>
        <p>退款订单数</p>
      </el-col>
      <el-col :span="6">
        <p class="score green">{{backData.orderNumCount?backData.orderNumCount:'0'}}</p>
        <p>退款件数</p>
      </el-col>
      <el-col :span="6">
        <p class="score green">{{backData.payPrice?backData.payPrice/100:0}}</p>
        <p>退款实付</p>
      </el-col>

    </el-row>

    <el-row class="tableBox" v-loading.body="loading">
      <el-tabs v-model="activeName2" type="card">
          <el-tab-pane label="规格统计" name="one">
            <ul class="listBox">
                <li class="first">
                  <span class="product gray">产品名</span>
                  <span class="name gray">商家名</span>
                  <span class="ding green" style="cursor:pointer;" @click="orderBy('orderCount',orderTypeList.orderCount)">订单数{{orderTypeList.orderCount=='up'?'↑':'↓'}}</span>
                  <span class="jian green" style="cursor:pointer;" @click="orderBy('orderNumCount',orderTypeList.orderNumCount)">件数{{orderTypeList.orderNumCount=='up'?'↑':'↓'}}</span>
                  <span class="pay green" style="cursor:pointer;" @click="orderBy('payPrice',orderTypeList.payPrice)">实付{{orderTypeList.payPrice=='up'?'↑':'↓'}}</span>
                  <span class="detailed gray">详细</span>
                </li>
                <li :class="item.active==0?'liActive':''" v-for="(item,index) in list">
                  <div class="liTop">
                    <span class="product">
                      {{item.productName}}
                      <p class="gray">{{item.subTitle}}</p>
                    </span>
                    <span class="name text-left">{{item.businessmenName?item.businessmenName:'-'}}</span>
                    <span class="ding text-left">{{item.orderCount?item.orderCount:'0'}}</span>
                    <span class="jian">{{item.orderNumCount?item.orderNumCount:'0'}}</span>
                    <span class="pay green">{{item.payPrice?item.payPrice/100:'0'}}</span>
                    <span class="detailed green" @click="open(index)">{{item.active==0?'收起':'展开v'}}</span>
                  </div>
                  <el-collapse-transition>
                    <div v-show="item.liType" class="more">
                      <div v-for="item2 in item.detail" style="display:flex; margin-top:10px; padding-top:10px; border-top:1px solid #ccc;">
                        <span class="txt">{{item2.name}}</span>
                        <span class="ding">{{item2.orderCount?item2.orderCount:'0'}}</span>
                        <span class="jian">{{item2.orderNumCount?item2.orderNumCount:'0'}}</span>
                        <span class="tui">{{item2.payPrice?item2.payPrice/100:'0'}}</span>
                      </div>
                    </div>
                 </el-collapse-transition>
                </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="价格统计" name="two">
            <ul class="listBox">
                <li class="first">
                  <span class="product gray">产品名</span>
                  <span class="name gray">商家名</span>
                  <span class="ding green" style="cursor:pointer;" @click="orderBy('orderCount',orderTypeList.orderCount)">订单数{{orderTypeList.orderCount=='up'?'↑':'↓'}}</span>
                  <span class="jian green" style="cursor:pointer;" @click="orderBy('orderNumCount',orderTypeList.orderNumCount)">件数{{orderTypeList.orderNumCount=='up'?'↑':'↓'}}</span>
                  <span class="pay green" style="cursor:pointer;" @click="orderBy('payPrice',orderTypeList.payPrice)">实付{{orderTypeList.payPrice=='up'?'↑':'↓'}}</span>
                  <span class="detailed gray">详细</span>
                </li>
                <li :class="item.active==0?'liActive':''" v-for="(item,index) in list">
                  <div class="liTop">
                    <span class="product">
                      {{item.productName}}
                      <p class="gray">{{item.subTitle}}</p>
                    </span>
                    <span class="name text-left">{{item.businessmenName}}</span>
                    <span class="ding text-left">{{item.orderCount?item.orderCount:'0'}}</span>
                    <span class="jian">{{item.orderNumCount?item.orderNumCount:'0'}}</span>
                    <span class="pay green">{{item.payPrice?item.payPrice/100:'0'}}</span>
                    <span class="detailed green" @click="open(index)">{{item.active==0?'收起':'展开v'}}</span>
                  </div>
                  <el-collapse-transition>
                    <div v-show="item.liType" class="more">
                      <div v-for="item2 in item.detail" style="display:flex; margin-top:10px; padding-top:10px; border-top:1px solid #ccc;">
                        <span class="txt">{{item2.name}}</span>
                        <span class="ding">{{item2.orderCount?item2.orderCount:'0'}}</span>
                        <span class="jian">{{item2.orderNumCount?item2.orderNumCount:'0'}}</span>
                        <span class="tui">{{item2.payPrice?item2.payPrice/100:'0'}}</span>
                      </div>
                    </div>
                 </el-collapse-transition>
                </li>
            </ul>
          </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row class="text-right">
      <el-col :span="2" :offset="16" style="line-height:30px;">共{{total}}条</el-col>
      <el-col :span="6" class="text-right">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="pageSize"
          :page-count="pageCount"
          layout="prev, pager, next, jumper">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
var url;

export default {
  data (){
    return {
      list:[],
      typeName:'',
      startDate:'',
      endDate:'',
      shopId:'',
      productName:'',
      businessmenName:'',
      otaId:'',
      options:['游玩','酒店','剧场','OTA','卡券','团体活动','教育培训'],
      page:1,
      pageSize:10,
      pageCount:1,
      total:0,
      activeName2:'one',
      loading:false,
      dataLoading:false,
      backData:{
        orderCount:0,
        orderNumCount:0,
        payPrice:0,
        productCount:0,
        totalPrice:0
      },
      orderType:'',
      orderTypeList:{
        orderCount:'down',
        orderNumCount:'down',
        totalPrice:'down',
        payPrice:'down',
        refundCount:'down',
        refundNumCount:'down'
      },
    }
  },
  methods:{
    orderBy:function (val){
      if(this.orderTypeList[val]=='up'){
        this.orderType=val+'_Down';
        this.orderTypeList[val]='down';
      }else{
        this.orderType=val+'_Up';
        this.orderTypeList[val]='up';
      }
      this.getList();
    },
    find:function (){
      this.getList();
      this.getNumb();
    },
    open:function (n){
      console.log(n);
      if(this.list[n].active==1){
        this.list[n].active=0;
      }else{
        this.list[n].active=1;
      }
      this.list[n].liType=!this.list[n].liType;
      this.$set(this.list,0,this.list[0]);
    },
    getNumb:function (){
      var that = this;
      that.dataLoading=true;
      var star=that.startDate.getTime();
      var end=that.endDate.getTime();
      axios.get(url+"/v1/tradeAnalysis/gets/refund/summaryAnalysis",{
        params:{
          businessmenName:that.businessmenName,
          endDate:end,
          otaId:that.otaId,
          productName:that.productName,
          shopId:that.shopId,
          startDate:star,
          typeName:that.typeName
        }
      }).then((res)=>{
        if(res.data.code==0){
          var data=res.data.data;
          that.backData.orderCount=data.orderCount;
          that.backData.orderNumCount=data.orderNumCount;
          that.backData.payPrice=parseInt(data.payPrice);
          that.backData.productCount=data.productCount;
        }
        that.dataLoading=false;
      })
    },
    handleCurrentChange:function (){
      this.getList();
      this.getNumb();
      console.log(this.page);
    },
    getList:function (){
      var that = this;
      that.loading=true;
      if(!that.startDate||!that.endDate){
          that.$message({
           showClose: true,
           message: '请选择时间段',
           type: 'error'
         });
        return;
      }
      var star=that.startDate.getTime();
      var end=that.endDate.getTime();

      axios.get(url+'/v1/tradeAnalysis/gets/refund',{
        params:{
          businessmenName:that.businessmenName,
          endDate:end,
          otaId:that.otaId,
          pageCount:that.pageSize,
          pageIndex:that.page,
          productName:that.productName,
          shopId:that.shopId,
          sort:that.orderType,
          startDate:star,
          type:that.activeName2=='one'?1:2,
          typeName:that.typeName
        }
      }).then((res)=>{
        if(res.data.code==0){
          that.pageCount=res.data.data.pages;
          that.total=res.data.data.total;
          that.list=res.data.data.result;
          for(let i=0;i<that.list.length;i++){
            that.list[i].active=1;
            that.list[i].liType=false;
            that.list[i].totalPrice=parseInt(that.list[i].totalPrice);
            that.list[i].payPrice=parseInt(that.list[i].payPrice);
          }
        }
        that.loading=false;
      })
    }
  },
  watch:{
    activeName2:function (){
      this.getList();
      this.getNumb();
    }
  },
  created(){
    url=this.$store.state.url;
    var adate=new Date();
    var time=adate.getTime()-7*24*60*60*1000;
    var bdate = new Date(time);
    this.startDate=bdate;
    this.endDate=adate;
    this.getList();
    this.getNumb();
  }
}
</script>

<style lang="Sass" scoped>
.backBox{
  span{font-size: 12px; line-height: 30px;}
  .el-date-editor.el-input{width: 150px;}
  .dataBox{background: #fff; margin: 10px 0; border-radius: 10px; padding: 10px 0;
    .score{font-size: 24px;}
    p{font-size: 12px;}
  }
  .tableBox{ margin: 10px 0; border-radius: 10px;}
}
.listBox{width: 100%; background: #fff; padding: 10px; box-sizing: border-box;

  .first{display: flex; height: 30px; line-height: 30px; text-align: left; padding: 5px;
      span{display: inline-block; line-height: 30px; }
      .product{flex:1;}
      .name{flex: 0 0 200px;}
      .ding{flex: 0 0 100px;}
      .jian{flex: 0 0 100px;}
      .all{flex: 0 0 80px;}
      .pay{flex: 0 0 80px;}
      .backDing{flex: 0 0 100px;}
      .backJian{flex: 0 0 120px;}
      .detailed{flex: 0 0 80px;}
  }
  li{ overflow: hidden; text-align: left; padding: 10px 5px 5px 5px;

    .liTop{display: flex; margin-top: -5px;
      .product{flex:1;
        p{font-size: 12px; margin-top: 5px;}
      }
      .name{flex: 0 0 200px;}
      .ding{flex: 0 0 100px;}
      .jian{flex: 0 0 100px;}
      .all{flex: 0 0 80px;}
      .pay{flex: 0 0 80px;}
      .backDing{flex: 0 0 100px;}
      .backJian{flex: 0 0 120px;}
      .detailed{flex: 0 0 80px; cursor: pointer;}
    }
    span{display: inline-block;  box-sizing: border-box; font-size: 12px; line-height: 16px;}
  }
  .liActive{background: #CFE0D7 !important; height: auto; border: 1px solid #38CA7C; border-radius: 10px;}
  .more{
    div{ font-size: 12px;}
    span{display: inline-block;}
    .txt{flex:1; text-align: right; padding-right: 100px;}
    .type{flex:0 0 100px; text-align: right; padding-right: 15px;}
    .ding{flex:0 0 100px;}
    .jian{flex:0 0 100px;}
    .zong{flex:0 0 80px;}
    .tui{flex:0 0 160px;}
  }
  li:nth-of-type(odd){background: #FAFAFC;}
  li:first-child{background: #fff;}
  .el-checkbox, .el-checkbox__input{white-space:normal; font-size: 12px;}
}
</style>
